<template>
  <n-modal class="sale-transform" v-model:show="saleTransformModalActive" transform-origin="center">
    <n-card style="width: 60%" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <template #header>
        <div class="my-title--modal">转化订单</div>
      </template>
      <div class="t-query">
        <span>搜索会员</span>
        <input type="text" placeholder="请输入会员姓名/电话/邀请码">
      </div>
      <div class="t-table">
        <n-data-table :columns="columns" :data="data" bordered style="--n-font-size:24px" />
      </div>
      <div class="t-tip">
        <div class="t-tip_title">
          <div class="t-tip_title_icon iconfont icon-guanyu"></div>
          <span class="t-tip_title_text">提示：</span>
        </div>
        <p class="t-tip_content">转化订单后，不可退单！</p>
      </div>
      <template #footer>
        <div class="t-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import {
  reactive,
  inject
} from "vue";

let saleTransformModalActive = inject('saleTransformModalActive')

const columns = [{
  title: "会员姓名",
  key: "goods"
},
{
  title: "电话号码",
  key: "spec"
},
{
  title: "会员类型",
  key: "quantity"
},
{
  title: "注册时间",
  key: "amount"
}
]
const data = reactive([{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248
}
]);
</script>

<style lang="less" scoped>
.sale-transform {
  .t-table {
    margin: 20px 40px 20px 20px;
  }
  .t-query {
    > span {
      width: 101px;
      height: 25px;
      margin-right: 20px;
      font-size: 26px;
      font-weight: 500;
      color: #2e323d;
      line-height: 18px;
    }
    > input {
      width: 380px;
      height: 60px;
      padding: 0 20px; 
      font-size: 26px;
      font-weight: 400;
      color: #666;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
    }
  }
  .t-tip {
    width: 900px;
    height: 180px;
    padding: 20px;
    margin-top: 50px;
    margin-left: 20px;
    background: #fff7ec;
    border-radius: 5px;
    overflow-y: auto;

    &_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      &_icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        color: #fe9f1b;
        font-size: 30px;
        line-height: 25px;
      }

      &_text {
        font-size: 22px;
        font-weight: 400;
        color: #4a5060;
      }
    }

    &_content {
      position: relative;
      margin: 0 0 20px 58px;
      font-size: 22px;
      font-weight: 500;
      color: #fe9f1b;
      line-height: 18px;

      &::before {
        position: absolute;
        top: 5px;
        left: -18px;
        content: "";
        width: 10px;
        height: 10px;
        background: #666;
        border-radius: 50%;
      }
    }
  }
  .t-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>